<template>
  <el-dialog title="导入试题" style="width: 324px;" modal-class="dialog-add" v-model="dialogVisible"
    @close="dialogFormVisible(false)" :close-on-click-modal="false" :close-on-press-escape="false">
    <!--form表单-->
    <el-form size="small" ref="form" label-width="80px" :model="form" :rules="formRules">
      <el-form-item label="选择文件" prop="file">
        <el-upload ref="uploadRef" class="upload-demo" :limit="1" :http-request="httpRequest" :on-exceed="handleExceed" :auto-upload="false">
          <template #trigger>
            <el-button style="width: 200px;" type="primary">上传</el-button>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="$refs.uploadRef.submit()" :loading="loading">导入</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import PositionApi from '@/api/position.js';
import CourseApi from '@/api/course.js';
export default {
  data() {
    return {
      /*左边长度*/
      formLabelWidth: '140px',
      /*是否显示*/
      loading: false,
      /*是否显示*/
      dialogVisible: true,
      /*form表单对象*/
      form: {
        appraisals: [
          {
            name: ''
          }
        ],
        career_id: '',
        id: ''
      },
      careeList: [],
      /*form验证*/
      formRules: {
        appraisals: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ],
        career_id: {
          required: true,
          message: '请选择所属职业',
          trigger: 'blur'
        }
      },
      isUpdate: false
    };
  },
  props: ['title'],
  watch: {
    title: function () {
      this.$nextTick(() => {
        this.form.address = this.title;
      })
    },
  },
  created() {
    this.getData()
  },
  methods: {
    handleExceed(file) {
      console.log(file,'file')
      this.$refs.uploadRef.clearFiles()
      this.$refs.uploadRef.handleStart(file[0])
    },
    setTitle({ career_id }) {
      this.form.appraisals = [
        {
          name: ''
        }
      ];
      this.form.career_id = career_id;
      this.isUpdate = true
      this.getInfo()
    },
    httpRequest(data) {
      if (!data.file) return
      this.loading = true
      let formData = new FormData()
      formData.append('myfile', data.file)
      CourseApi.importQuestion(formData).then(res => {
        this.loading = false
        console.log(res,'res')
        this.dialogFormVisible(true,res.data);
      }).catch(error => {
        this.$refs.uploadRef.clearFiles()
        this.loading = false
      });

    },
    getInfo() {
      PositionApi.getCareerAppraisal({
        career_id: this.form.career_id
      }).then(res => {
        if (res.data && res.data.length > 0) {
          this.form.appraisals = res.data.map(item => {
            item = {
              name: item.appraisal,
              id: item.id,
              career_id: this.form.career_id,
            }
            return item
          })
        }
        // this.form.id = res.data[0].id
        // this.form.appraisals = res.data[0].address
      }).catch(error => {
      });

    },
    /*获取数据*/
    getData() {
      let self = this;
      PositionApi.getCareerList({
        shop_user_id: this.shop_user_id
      }).then(res => {
        self.careeList = res.data;
      }).catch(error => {
      });
    },
    /*添加*/
    onSubmit() {
      let self = this;
      self.loading = true;
      let params = { ...self.form };
      let key = 'careerAppraisalStore'
      let msg = '导入成功'
      if (self.isUpdate) {
        key = 'careerAppraisalUpdate'
        msg = '编辑成功'
        let appraisals = []
        params.appraisals.forEach(item => {
          appraisals.push({
            appraisal: item.name,
            id: item.id || 0,
            career_id: this.form.career_id,
          })
        })
        params = {
          appraisals: appraisals,
          career_id: this.form.career_id,
        }
      } else {
        params.appraisals = params.appraisals.map(item => {
          item = item.name
          return item
        })
      }
      PositionApi[key](params, true)
        .then(data => {
          self.loading = false;
          ElMessage({
            message: msg,
            type: 'success'
          });
          self.dialogFormVisible(true);
        })
        .catch(error => {
          self.loading = false;
        });
    },

    /*关闭弹窗*/
    dialogFormVisible(e,data = {}) {
      if (e) {
        this.$emit('close', {
          type: 'success',
          openDialog: false,
          data
        });
      } else {
        this.$emit('close', {
          type: 'error',
          openDialog: false
        });
      }
    },
    appraisalsAdd(index) {
      this.form.appraisals.splice(index + 1, 0, {
        name: ''
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.el-icon-circle-plus {
  color: #3A6AE2;
  font-size: 20px;
}

.add-btn {
  height: 30px;
  // width: 20px;
}
</style>